<%--
/**
* Copyright (c) 2000-2010 Liferay, Inc. All rights reserved.
*
* This library is free software; you can redistribute it and/or modify it under
* the terms of the GNU Lesser General Public License as published by the Free
* Software Foundation; either version 2.1 of the License, or (at your option)
* any later version.
*
* This library is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
* details.
*/
--%>

<%@page import="Common.Read_XML"%>
<%@page import="javax.portlet.RenderRequest"%>
<%@page import="javax.portlet.RenderResponse"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ page import="com.liferay.portal.kernel.portlet.LiferayWindowState"%>
<portlet:defineObjects />
<portlet:renderURL var="somePageURL"
	windowState="<%=LiferayWindowState.EXCLUSIVE.toString()%>">
	<portlet:param name="jspPage" value="/html/pmap_portlet/showTbl.jsp" />
</portlet:renderURL>
<portlet:renderURL var="divContent"
	windowState="<%=LiferayWindowState.EXCLUSIVE.toString()%>">
	<portlet:param name="jspPage" value="/html/pmap_portlet/select.jsp" />
</portlet:renderURL>
<portlet:renderURL var="searchPageURL"
	windowState="<%=LiferayWindowState.EXCLUSIVE.toString()%>">
	<portlet:param name="jspPage" value="/html/pmap_portlet/attSeach.jsp" />
</portlet:renderURL>
<!-- This is the <b>geo_portlet</b> portlet in View mode. -->
<html>
<head>
<title>View Portlet</title>
<!-- Basic CSS definitions -->
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

<link rel="stylesheet" href="/PMap-portlet/css/map.css" type="text/css" />
<link rel="stylesheet" href="/PMap-portlet/css/control_map.css"
	type="text/css" />
<style type="text/css">
#ui-datepicker-div {
	font-size: 10px;
}

.customEditingToolbar {
	float: right;
	right: 0px;
	height: 30px;
	width: 380px;
}

.customEditingToolbar div {
	float: right;
	margin: 5px;
	width: 24px;
	height: 24px;
}

.sizeTool {
	font-size: x-small;
}

/* style cho bang chuc nang: modify */
#div_Map_divModifyFeature,#div_Map_divAddFeature {
	border: 1px solid;
	top: 0px;
	left: 0px;
	width: 250px;
	height: auto;
	position: absolute;
	display: none;
	background: #F0F8FF;
	z-index: 3002;
}

#div_Map_divAddFeature_Attribute {
	border: 1px solid;
	top: 0px;
	left: 0px;
	width: 250px;
	height: auto;
	position: absolute;
	display: none;
	background: #F0F8FF;
	z-index: 3003;
}
</style>


<!-- <script src="http://www.openlayers.org/dev/OpenLayers.js"></script> -->
<script src="http://192.168.1.29:8080/OpenLayers/lib/OpenLayers.js"></script>
<script type="text/javascript"
	src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="/PMap-portlet/js/contextmenu.js"></script>
<link rel="stylesheet" href="/PMap-portlet/css/contextmenu.css"
	type="text/css" />
<link rel="stylesheet" href="/PMap-portlet/css/google.css"
	type="text/css" />
<script type="text/javascript">
	
</script>
</head>
<body style="width: 100%; height: 100%;">
	<div id="divMain"
		style="border: 1px solid; width: 100%; height: 100% px;"
		oncontextmenu="return false;">
		<table>
			<tr>
				<td align="left" valign="top" style="width: 100%; height: 100%;"
					id="td_Map_Tools">
					<div id="div_Map_Tools">

						<div id="divLayersList_Tools" style="margin: 5px;">
							<fieldset>
								<legend id="legend_Tool_divLayersList">Layers</legend>
								<div id="div_Tool_divMFS" style="margin: 5px">
									<table class="sizeTool">
										<tr>
											<td id="td_Tool_Layer">Layers:</td>
											<td style="margin-left: 15px;"><select
												id="select_Tool_cboLayers"
												onchange="return Zoom_To_Layer();" style="width: 100px;">
													<option selected="selected" value="0"
														id="option_Tool_select_0">Select layer</option>
											</select></td>
										</tr>
										<tr>
											<!-- nguyennv -->
											<td><input type="button"
												onclick="showPopup('<%=somePageURL%>')"
												id="btn_Map_OpenAttr" value="Open Attribute"></td>
											<td><input type="button"
												onclick="showSearching('<%=searchPageURL%>')"
												id="btn_Search" value="Searching"></td>
											<td><input type="button" value="Select Attribute"
												onclick="selectAttribute('<%=divContent%>')" /></td>
										</tr>
									</table>
								</div>
							</fieldset>
						</div>

						<div id="div_Tool_divTools" style="margin: 5px;">
							<fieldset>
								<legend id="legend_Tool_divTools">Tools</legend>
								<div id="div_Tool_divSelect_Tool" style="margin: 5px"></div>
							</fieldset>
						</div>
					</div>
				</td>
				<td><img id="img_Map_ShowHide" title="Hide" alt="Hide"
					style="border: 1px solid black;"></td>
				<td align="left" valign="top" id="td_Map_divMap"
					style="width: 100%; height: 100%">
					<div id="map" style="width: 100px; height: 60px;"></div>
				</td>
			</tr>
		</table>
	</div>
	<div id="location"></div>
	<div id="scale"></div>
	<div id="div_Map_LayerList" style="display: none;">
		<div id="divLayersList" style="margin: 5px;">
			<fieldset>
				<legend id="legend_LayerList_Base">Base</legend>
				<div id="divBase" style="margin: 5px">
					<div id="div_Map_BaseMap_Gogle">
						<label for="radLayerBase_StreetMap" title="Street Map"> <input
							type="radio" name="radLayerBase" id="radLayerBase_StreetMap"
							value="OSM" onchange="changeLayerBase(this);" /> Street map
						</label> <br> <label for="radLayerBase_GoogleMap" title="Google Map">
							<input type="radio" name="radLayerBase"
							id="radLayerBase_GoogleMap" value="GSM"
							onchange="changeLayerBase(this);" checked="checked" /> Google
							map
						</label> <br> <label for="radLayerBase_GoogleSatallite"
							title="Google Satellite"> <input type="radio"
							name="radLayerBase" id="radLayerBase_GoogleSatallite" value="GSL"
							onchange="changeLayerBase(this);" /> Google Satellite
						</label>
					</div>
					<div id="div_Map_BaseMap" style="display: none;">
						<label for="radLayerBase_User" title="Street Map"> <input
							type="radio" name="radLayerBase" id="radLayerBase_User"
							value="user" checked="checked"> <span
							id="span_Map_LayerBase_User"></span>
						</label>
					</div>
				</div>
			</fieldset>
			<fieldset>
				<legend id="legend_LayerList_WMS">WMS</legend>
				<div id="divWMS" style="margin: 5px">
					<!--<label for="chkLayer" title="Quan - Huyen">
						                 <input type="checkbox" name="chkLayer" id="chkLayer" value="chkLayer" />
						                 Quan - Huyen
						                </label>-->
				</div>
			</fieldset>
			<fieldset>
				<legend id="legend_LayerList_WFS">WFS</legend>
				<div id="divMFS" style="margin: 5px"></div>
			</fieldset>
		</div>
	</div>
	<div id="Img_LayerList">
		<img id="imgLayerList" style="cursor: pointer;" title="Open"
			alt="Open" src="/PMap-portlet/html/pmap_portlet/img/plus.png"
			onclick="Image_LayerList_Click();">
	</div>
	<div id="OV"></div>
	<div id="Img_OV">
		<img id="imgOV" style="cursor: pointer;" title="Close" alt="Close"
			src="/PMap-portlet/html/pmap_portlet/img/btn_collase.png"
			onclick="Image_OV_Click();">
	</div>
	<div id="div_Map_divToolbar"></div>
	<div id="div_Map_divToolbar_LineExtension" style="width: 300px;"></div>

	<!-- context menu -->
	<ul id="myMenu" class="contextMenu">
		<li class="edit"><a href="#edit">Edit</a></li>
		<li class="cut separator"><a href="#cut">Cut</a></li>
		<li class="copy"><a href="#copy">Copy</a></li>
		<li class="paste"><a href="#paste">Paste</a></li>
		<li class="delete"><a href="#delete">Delete</a></li>
		<li class="quit separator"><a href="#quit">Quit</a></li>
	</ul>

	<!-- divContainer cho Add Feature Extension -->
	<div id="div_Map_divAddFeature" style="display: none;">
		<table style="width: 100%; margin: 5px;">
			<tr>
				<th id="th_Map_AddFeature"
					style="font-weight: bold; font-style: italic;"><span
					id="span_Map_AddFeature"></span></th>
				<td colspan="1" align="right"><img
					src="/PMap-portlet/html/pmap_portlet/img/cancel.png"
					onclick="return AddFeature_Close();"
					style="cursor: pointer; padding: 0px 10px 0px 0px" /></td>
			</tr>
			<tr>
				<td colspan="2"><hr></td>
			</tr>
			<!-- <tr id="tr_Map_AddFeature_Normal">
	                <td colspan="2" id="td_Map_AddFeature_Normal">
	                    <input type="radio" name="addFeature" value="normal" checked="checked" onmousedown="event_AddFeature(this);" />
	                    <span id="span_Map_AddFeature_Normal"></span>  
	                </td>
	            </tr> -->
			<tr id="tr_Map_AddFeature_Angle">
				<td colspan="2" id="td_Map_AddFeature_Angle"><input
					type="radio" name="addFeature" value="angle"
					onmousedown="event_AddFeature(this);" /> <span
					id="span_Map_AddFeature_Angle"></span></td>
			</tr>
			<tr id="tr_Map_AddFeature_Parallel">
				<td colspan="2" id="td_Map_AddFeature_Parallel"><input
					type="radio" name="addFeature" value="parallel"
					onmousedown="event_AddFeature(this);" /> <span
					id="span_Map_AddFeature_Parallel"></span></td>
			</tr>
			<tr id="tr_Map_AddFeature_Direction" style="display: none;">
				<td colspan="2" id="td_Map_AddFeature_Direction"><input
					type="radio" name="addFeature" value="distance"
					onmousedown="event_AddFeature(this);" /> <span
					id="span_Map_AddFeature_Direction"></span></td>
			</tr>
			<!-- <tr id="tr_Map_AddFeature_Vertext">
				<td colspan="2" id="td_Map_AddFeature_Vertext"><input
					type="radio" name="addFeature" value="vertext"
					onmousedown="event_AddFeature(this);" /> <span
					id="span_Map_AddFeature_Vertext"></span></td>
			</tr> -->
			<tr id="tr_Map_AddFeature_Copy">
				<td colspan="2" id="td_Map_AddFeature_Copy"><input type="radio"
					name="addFeature" value="copy"
					onmousedown="event_AddFeature(this);" /> <span
					id="span_Map_AddFeature_Copy"></span></td>
			</tr>
			<tr>
				<td align="right" colspan="2"><input type="button" value="OK"
					id="btn_Map_AddFeature" onclick="btn_Map_AddFeature_Click();"
					style="margin: 10px;" /></td>
			</tr>
		</table>
	</div>

	<!-- div cho thêm thông tin thuộc tính -->
	<div id="div_Map_divAddFeature_Attribute">
		<table id="tbl_Map_AddFeature_Attribute"
			style="width: 100%; margin: 5px;">
			<tr>
				<th id="th_Map_AddFeature_Attribute"
					style="font-weight: bold; font-style: italic;"><span
					id="span_Map_AddFeature_Attribute"></span></th>
				<td colspan="1" align="right"><img
					src="/PMap-portlet/html/pmap_portlet/img/cancel.png"
					onclick="return AddFeature_Attribute_Close();"
					style="cursor: pointer; padding: 0px 10px 0px 0px" /></td>
			</tr>
			<tr>
				<td colspan="2"><hr></td>
			</tr>
			<tr>
				<td>Id_Code</td>
				<td><input type="text" id="txt_Map_AddFeature_Attribute_IdCode"
					value="idcode" /></td>
			</tr>
			<tr>
				<td>Id_Show</td>
				<td><input type="text" id="txt_Map_AddFeature_Attribute_IdShow"
					value="idshow" /></td>
			</tr>
			<tr>
				<td colspan="2" style="margin: 5px"><input type="button"
					value="Add Feature" onclick="addFeature();" /></td>
			</tr>
		</table>
	</div>

	<!-- divContainer cho Modify Feature -->
	<div id="div_Map_divModifyFeature">
		<table style="width: 100%; margin: 5px;">
			<tr>
				<th id="th_Map_ModifyFeature"
					style="font-weight: bold; font-style: italic;"><span
					id="span_Map_ModifyFeature"></span></th>
				<td colspan="1" align="right"><img
					src="/PMap-portlet/html/pmap_portlet/img/cancel.png"
					onclick="return ModifyFeature_Close();"
					style="cursor: pointer; padding: 0px 10px 0px 0px" /></td>
			</tr>
			<tr>
				<td colspan="2"><hr></td>
			</tr>
			<tr id="tr_Map_ModifyFeature_Drag">
				<td colspan="2" id="td_Map_ModifyFeature_Drag"><input
					type="radio" name="modifyFeature" value="drag"
					onmousedown="event_ModiyFeature(this);" /> <span
					id="span_Map_ModifyFeature_Drag"></span></td>
			</tr>
			<tr id="tr_Map_ModifyFeature_Vertex">
				<td colspan="2" id="td_Map_ModifyFeature_Vertex"><input
					type="radio" name="modifyFeature" value="vertex"
					onmousedown="event_ModiyFeature(this);" /> <span
					id="span_Map_ModifyFeature_Vertex"></span></td>
			</tr>
			<tr id="tr_Map_ModifyFeature_DelVertex">
				<td colspan="2" id="td_Map_ModifyFeature_DelVertex"><input
					type="radio" name="modifyFeature" value="delvertex"
					onmousedown="event_ModiyFeature(this);" /> <span
					id="span_Map_ModifyFeature_DelVertex"></span></td>
			</tr>
			<tr id="tr_Map_ModifyFeature_Attribute">
				<td colspan="2" id="td_Map_ModifyFeature_Attribute"><input
					type="radio" name="modifyFeature" value="attribute"
					onmousedown="event_ModiyFeature(this);" /> <span
					id="span_Map_ModifyFeature_Attribute"></span></td>
			</tr>
			<tr>
				<td colspan="2" align="right"
					style="margin-right: 15px; color: red; font-size: smaller;"><span
					id="span_Map_ModifyFeature_UnFeatureSelected"></span></td>
			</tr>
		</table>
		<div id="div_Map_divModifyFeature_Attribute" style="display: none;">
			<hr />
			<table id="tbl_Map_ModifyFeature" style="margin: 5px;">
				<tr>
					<td id="td_Map_FeatureSelected"><span
						id="span_Map_FeatureSelected"></span></td>
					<td><input id="txt_Map_FeatureSelected_Modify" type="text"
						value="" style="margin-left: 5px;" disabled="disabled"></input></td>
				</tr>
			</table>
		</div>
	</div>

	<!-- div khi ve line so voi goc -->
	<div id="div_Map_DirectionFeature">
		<table>
			<tr>
				<th colspan="3" id="th_Map_DirectionFeature"
					style="font-weight: bold; font-style: italic;"><span
					id="span_Map_DirectionFeature"></span></th>
				<td colspan="1" align="right"><img
					src="/PMap-portlet/html/pmap_portlet/img/cancel.png"
					onclick="return ExtensionFeature_Close();"
					style="cursor: pointer; padding: 0px 10px 0px 0px" /></td>
			</tr>
			<tr>
				<td colspan="4"><hr></td>
			</tr>
			<tr>
				<td style="width: auto;"><input type="checkbox"
					id="chk_Map_Goc" onmousedown="return change_Goc(this);"
					style="margin: 3px;" /> &nbsp;&nbsp;&nbsp;</td>
				<td style="width: auto;">Angle: &nbsp;&nbsp;&nbsp;</td>
				<td style="width: auto;"><input type="text" id="txt_Map_Goc"
					value="0" disabled="disabled" /></td>
				<td style="width: auto;"></td>
			</tr>
			<tr>
				<td style="width: auto;"><input type="checkbox"
					id="chk_Map_Length" onmousedown="return change_DoDai(this);"
					style="margin: 3px;" /> &nbsp;&nbsp;&nbsp;</td>
				<td style="width: auto;">Lenght: &nbsp;&nbsp;&nbsp;</td>
				<td style="width: auto;"><input type="text"
					id="txt_Map_ChieuDai" value="0" disabled="disabled" /></td>
				<td></td>
			</tr>
			<tr align="right">
				<td colspan="4" align="left" style="margin-left: 10px;"><input
					type="checkbox" id="chk_Map_Relative" style="margin: 10px;"
					disabled="disabled" /> &nbsp; Relative to current route</td>
			</tr>
			<tr align="right">
				<td colspan="4"><input type="button" id="btn_Map_OK_Direction"
					value="OK" style="width: 80px; float: right; margin: 10px;"
					onclick="btn_Map_OK_Direction_Click();" /></td>
			</tr>
		</table>
	</div>

	<!-- div khi ve line song song voi 1 line -->
	<div id="div_Map_ParallelFeature">
		<table>
			<tr>
				<th colspan="3" id="th_Map_ParallelFeature"
					style="font-weight: bold; font-style: italic;"><span
					id="span_Map_ParallelFeature"></span></th>
				<td colspan="1" align="right"><img
					src="/PMap-portlet/html/pmap_portlet/img/cancel.png"
					onclick="return ExtensionFeature_Close();"
					style="cursor: pointer; padding: 0px 10px 0px 0px" /></td>
			</tr>
			<tr>
				<td colspan="4"><hr></td>
			</tr>
			<tr>
				<td></td>
				<td style="width: 100px;">Feature Selected:</td>
				<td style="width: auto;"><input type="text"
					id="txt_Map_FeatureSelected_Parallel" value="" disabled="disabled"
					style="margin: 3px;" /></td>
				<td></td>
			</tr>
			<tr>
				<td style="width: auto;"><input type="checkbox"
					id="chk_Map_Length_Parallel" style="margin: 10px"
					onmousedown="return change_DoDai_Parallel(this);" /></td>
				<td style="width: 100px;">Length:</td>
				<td style="width: auto;"><input type="text"
					id="txt_Map_ChieuDai_Parallel" value="0" disabled="disabled" /></td>
				<td></td>
			</tr>
			<tr align="right">
				<td colspan="4"><input type="button" id="btn_Map_OK_Parallel"
					value="Apply" style="width: 80px; float: right; margin: 10px;"
					onclick="btnMapOK_Parallel();" /></td>
			</tr>
		</table>
	</div>

	<!-- div khi split -->

	<!-- div khi merge -->
	<div id="div_Map_Merger_Feature">
		<table id="tbl_Map_Merge_Feature" style="width: 100%;">
			<tr>
				<th id="th_Map_Merge_Feature"
					style="font-weight: bold; font-style: italic;"><span
					id="span_Map_Merge_Feature"></span></th>
				<td colspan="1" align="right"><img
					src="/PMap-portlet/html/pmap_portlet/img/cancel.png"
					onclick="return MergeFeature_Close();"
					style="cursor: pointer; padding: 0px 10px 0px 0px" /></td>
			</tr>
			<tr>
				<td colspan="2"><hr></td>
			</tr>
			<tr>
				<td><b><span id="span_Map_Merge_Feature_List"></span></b></td>
			</tr>
			<tr>
				<td><hr /></td>
			</tr>
			<tbody id="tbody_Map_Merge_Feature">
			</tbody>
			<tfoot>
				<tr>
					<td><hr /></td>
				</tr>
				<tr>
					<td><input type="button" id="btn_Map_Merge_Action"
						value="Merge" style="margin: 5px;"
						onclick="btnMerge_Extent_Trim_Action_Click();" /> <input
						type="button" id="btn_Map_Merge_Cancel" value="Cancel"
						style="margin: 5px;"
						onclick="btnMerge_Extent_Trim_Cancel_Click();" /></td>
				</tr>
			</tfoot>
		</table>
	</div>

	<!-- div cho measure -->
	<div id="div_Map_Measure" style="width: 250px;">
		<table id="tbl_Map_Measure" style="width: 100%;">
			<tr>
				<th id="th_Map_Measure"
					style="font-weight: bold; font-style: italic;"><span
					id="span_Map_Measure">Do khoang cach</span></th>
				<td colspan="1" align="right"><img
					src="/PMap-portlet/html/pmap_portlet/img/cancel.png"
					onclick="return Measure_Close();"
					style="cursor: pointer; padding: 0px 10px 0px 0px" /></td>
			</tr>
			<tr>
				<td colspan="2"><hr></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="radio"
					name="radio_Map_Meassure" value="point" style="margin: 5px;"
					onmousedown="event_Measure(this);"> Point <input
					type="radio" name="radio_Map_Meassure" value="line"
					style="margin: 5px;" checked="checked"
					onmousedown="event_Measure(this);"> Distance <input
					type="radio" name="radio_Map_Meassure" value="area"
					style="margin: 5px;" onmousedown="event_Measure(this);">
					Area</td>
			</tr>
			<tr>
				<td colspan="2"><hr></td>
			</tr>
			<tr>
				<td colspan="2" style="height: 30px; padding: 10px;"><span
					id="span_Map_Measure_Detail"></span></td>
			</tr>
		</table>
	</div>

	<!-- div cho contextmenu cua layer -->
	<!-- <div id="div_Map_ContextMenuLayer" style="width: 250px; height: 100px; border: 1px solid black;">
    </div> -->



	<%
		String sRequest = renderRequest.getContextPath();
		String sAddr = request.getRemoteAddr();
		//Read_XML.Read();
	%>
	<input id="txtRequest" type="hidden" value=<%=sRequest%>></input>
	<input id="txtAddr" type="hidden" value=<%=sAddr%>></input>
	<%
		String sScript_Path_Load = sRequest;
		sScript_Path_Load = sScript_Path_Load + "/js/load.js";
		out.println("<script type='text/javascript' src='"
				+ sScript_Path_Load + "'></script>");
	%>

	<script type="text/javascript">
		loadXML();
		var IP_Addr = "localhost";
	</script>
	
	<script type="text/javascript">
        $.getJSON("http://jsonip.appspot.com?callback=?",
	    function (data) {	
	    	IP_Addr = data.ip;	
	    });
    </script>
	<%-- <portlet:actionURL name="Add Product" var="addProductURL"></portlet:actionURL> --%>
</body>
</html>